<template>
  <div>
    <p>name: {{ name }}</p>
    <p>age: {{ age }}</p>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script lang="ts">
export default {
  setup() {
    let name = "Hydra";
    const age = 35;

    const handleClick = function () {
      alert("我被点击了");

      // 默认不是响应式数据，所以改了值之后DOM上的数据也不会变化
      name = "奉先";
    };

    // 模板中要用到的方法、属性、对象……记得返回
    // 变量，默认不是响应式的。所以改变了值，节点上的数据不会发生改变。
    // 需要返回响应式的变量，完成响应式的功能。
    // Vue2的响应式的原理是属性拦截，Object.definedProperty
    // Vue3的响应式的原理是代理：proxy
    return {
      name,
      age,
      handleClick,
    };
  },
};
</script>

<style scoped>
</style>